<!DOCTYPE html>
        <html lang="zh-CN">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>交易记录 - USDTMarket</title>
            <script src="https://cdn.tailwindcss.com"></script>
            <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
            <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
            
            <script>
                tailwind.config = {
                    theme: {
                        extend: {
                            colors: {
                                primary: '#165DFF',
                                success: '#36D399',
                                danger: '#F87272',
                                warning: '#FBBD23',
                                dark: '#1E293B',
                                light: '#F1F5F9',
                                'dark-blue': '#0F172A',
                                'light-blue': '#E0E7FF',
                            },
                            fontFamily: {
                                inter: ['Inter', 'sans-serif'],
                            },
                        }
                    }
                }
            </script>
            
            <style type="text/tailwindcss">
                @layer utilities {
                    .content-auto {
                        content-visibility: auto;
                    }
                    .scrollbar-hide {
                        -ms-overflow-style: none;
                        scrollbar-width: none;
                    }
                    .scrollbar-hide::-webkit-scrollbar {
                        display: none;
                    }
                    .glass {
                        background: rgba(255, 255, 255, 0.2);
                        backdrop-filter: blur(10px);
                        -webkit-backdrop-filter: blur(10px);
                    }
                    .card-hover {
                        transition: all 0.3s ease;
                    }
                    .card-hover:hover {
                        transform: translateY(-3px);
                        box-shadow: 0 8px 15px -3px rgba(0, 0, 0, 0.1);
                    }
                    .price-tag {
                        @apply absolute -top-2 -right-2 bg-success text-white text-xs font-bold px-2 py-1 rounded-full shadow-lg;
                    }
                    .status-badge {
                        @apply px-2 py-1 rounded-full text-xs font-medium;
                    }
                }
            </style>
        </head>
        <body class="font-inter bg-gradient-to-br from-dark-blue to-dark min-h-screen text-light">
            <!-- 导航栏 -->
            <header class="fixed top-0 left-0 right-0 z-50 transition-all duration-300" id="navbar">
                <div class="container mx-auto px-4 py-3 flex items-center justify-between glass border-b border-white/10">
                    <div class="flex items-center space-x-2">
                        <div class="w-10 h-10 rounded-lg bg-primary flex items-center justify-center">
                            <i class="fa fa-exchange text-white text-xl"></i>
                        </div>
                        <h1 class="text-xl font-bold bg-gradient-to-r from-primary to-success bg-clip-text text-transparent">USDT<span class="text-sm font-normal ml-1">Market</span></h1>
                    </div>
                    
                    <nav class="hidden md:flex items-center space-x-8">
                        
                        <a href="index.html" class="text-white/70 hover:text-primary transition-colors">闪兑</a>
                        <a href="buy.html" class="text-white/70 hover:text-primary transition-colors">购买USDT</a>
                        <a href="sale.html" class="text-white/70 hover:text-primary transition-colors">出售USDT</a>
                        <a href="history.html" class="text-primary font-medium">交易记录</a>
                        <a href="help.html" class="text-white/70 hover:text-primary transition-colors">帮助中心</a>
                    </nav>
                    
                    <div class="flex items-center space-x-4">
                        <div class="relative">
                            <button class="flex items-center space-x-2 px-4 py-2 rounded-lg bg-primary/20 text-primary hover:bg-primary/30 transition-colors">
                                <i class="fa fa-user-circle-o text-xl"></i>
                                <span class="hidden md:inline">用户12345</span>
                                <i class="fa fa-angle-down"></i>
                            </button>
                        </div>
                        <button class="md:hidden text-white text-xl">
                            <i class="fa fa-bars"></i>
                        </button>
                    </div>
                </div>
            </header>

            <!-- 主内容区 -->
            <main class="container mx-auto px-4 pt-24 pb-16">
                <!-- 面包屑导航 -->
                <div class="mb-8 text-sm text-white/60">
                    <a href="#" class="hover:text-primary transition-colors">首页</a> &gt; <span class="text-white">交易记录</span>
                </div>
                
                <!-- 页面标题 -->
                <div class="mb-12 text-center">
                    <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-4">交易记录</h2>
                    <p class="text-white/80 max-w-2xl mx-auto">查看您的所有USDT交易历史，包括进行中、已完成和已取消的交易</p>
                </div>
                
                <!-- 筛选和搜索 -->
                <div class="bg-dark-blue rounded-xl p-6 border border-white/10 mb-8">
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <div>
                            <label class="block text-sm font-medium text-white/70 mb-2">交易类型</label>
                            <select class="w-full bg-dark rounded-lg px-4 py-3 text-white border border-white/10 focus:outline-none focus:ring-2 focus:ring-primary">
                                <option value="all">所有交易</option>
                                <option value="buy">购买USDT</option>
                                <option value="sell">出售USDT</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-white/70 mb-2">交易状态</label>
                            <select class="w-full bg-dark rounded-lg px-4 py-3 text-white border border-white/10 focus:outline-none focus:ring-2 focus:ring-primary">
                                <option value="all">所有状态</option>
                                <option value="pending">进行中</option>
                                <option value="completed">已完成</option>
                                <option value="cancelled">已取消</option>
                                <option value="disputed">有争议</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-white/70 mb-2">时间范围</label>
                            <select class="w-full bg-dark rounded-lg px-4 py-3 text-white border border-white/10 focus:outline-none focus:ring-2 focus:ring-primary">
                                <option value="7days">最近7天</option>
                                <option value="30days">最近30天</option>
                                <option value="90days">最近90天</option>
                                <option value="alltime">全部时间</option>
                            </select>
                        </div>
                    </div>
                    <div class="mt-6 flex flex-col md:flex-row gap-4">
                        <div class="relative flex-1">
                            <input type="text" placeholder="搜索交易ID、买家/卖家信息..." class="w-full bg-dark rounded-lg px-4 py-3 pl-10 text-white border border-white/10 focus:outline-none focus:ring-2 focus:ring-primary">
                            <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-white/50"></i>
                        </div>
                        <button class="px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors font-medium flex items-center justify-center gap-2">
                            <i class="fa fa-filter mr-1"></i> 应用筛选
                        </button>
                        <button class="px-6 py-3 bg-dark rounded-lg border border-white/10 text-white hover:bg-white/10 transition-colors flex items-center justify-center gap-2">
                            <i class="fa fa-refresh mr-1"></i> 重置
                        </button>
                    </div>
                </div>
                
                <!-- 交易记录列表 -->
                <div class="bg-dark-blue rounded-xl border border-white/10 overflow-hidden">
                    <!-- 桌面端表格 -->
                    <div class="hidden md:block">
                        <div class="bg-dark-blue/50 border-b border-white/10">
                            <div class="grid grid-cols-12 px-6 py-3 text-sm font-medium text-white/60">
                                <div class="col-span-2">交易ID</div>
                                <div class="col-span-2">交易时间</div>
                                <div class="col-span-2">类型</div>
                                <div class="col-span-2">金额</div>
                                <div class="col-span-2">价格</div>
                                <div class="col-span-1">状态</div>
                                <div class="col-span-1 text-right">操作</div>
                            </div>
                        </div>
                        
                        <!-- 交易记录项 -->
                        <div class="border-b border-white/10 hover:bg-white/5 transition-colors">
                            <div class="grid grid-cols-12 px-6 py-4">
                                <div class="col-span-2 text-sm">
                                    <div class="font-medium">#TRX-20230625-12345</div>
                                </div>
                                <div class="col-span-2 text-sm text-white/70">
                                    2023-06-25 14:30:22
                                </div>
                                <div class="col-span-2">
                                    <span class="px-3 py-1 rounded-full bg-primary/20 text-primary text-xs font-medium">出售USDT</span>
                                </div>
                                <div class="col-span-2 font-bold">
                                    1,000.00 USDT
                                </div>
                                <div class="col-span-2 text-white/70">
                                    7.32 CNY/USDT
                                </div>
                                <div class="col-span-1">
                                    <span class="status-badge bg-success/20 text-success">已完成</span>
                                </div>
                                <div class="col-span-1 text-right">
                                    <button class="text-primary hover:text-primary/80 text-sm">详情</button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="border-b border-white/10 hover:bg-white/5 transition-colors">
                            <div class="grid grid-cols-12 px-6 py-4">
                                <div class="col-span-2 text-sm">
                                    <div class="font-medium">#TRX-20230624-67890</div>
                                </div>
                                <div class="col-span-2 text-sm text-white/70">
                                    2023-06-24 09:15:47
                                </div>
                                <div class="col-span-2">
                                    <span class="px-3 py-1 rounded-full bg-primary/20 text-primary text-xs font-medium">购买USDT</span>
                                </div>
                                <div class="col-span-2 font-bold">
                                    500.00 USDT
                                </div>
                                <div class="col-span-2 text-white/70">
                                    7.30 CNY/USDT
                                </div>
                                <div class="col-span-1">
                                    <span class="status-badge bg-success/20 text-success">已完成</span>
                                </div>
                                <div class="col-span-1 text-right">
                                    <button class="text-primary hover:text-primary/80 text-sm">详情</button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="border-b border-white/10 hover:bg-white/5 transition-colors">
                            <div class="grid grid-cols-12 px-6 py-4">
                                <div class="col-span-2 text-sm">
                                    <div class="font-medium">#TRX-20230623-54321</div>
                                </div>
                                <div class="col-span-2 text-sm text-white/70">
                                    2023-06-23 16:42:11
                                </div>
                                <div class="col-span-2">
                                    <span class="px-3 py-1 rounded-full bg-primary/20 text-primary text-xs font-medium">出售USDT</span>
                                </div>
                                <div class="col-span-2 font-bold">
                                    2,000.00 USDT
                                </div>
                                <div class="col-span-2 text-white/70">
                                    7.28 CNY/USDT
                                </div>
                                <div class="col-span-1">
                                    <span class="status-badge bg-warning/20 text-warning">进行中</span>
                                </div>
                                <div class="col-span-1 text-right">
                                    <button class="text-primary hover:text-primary/80 text-sm">详情</button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="border-b border-white/10 hover:bg-white/5 transition-colors">
                            <div class="grid grid-cols-12 px-6 py-4">
                                <div class="col-span-2 text-sm">
                                    <div class="font-medium">#TRX-20230622-98765</div>
                                </div>
                                <div class="col-span-2 text-sm text-white/70">
                                    2023-06-22 11:08:33
                                </div>
                                <div class="col-span-2">
                                    <span class="px-3 py-1 rounded-full bg-primary/20 text-primary text-xs font-medium">购买USDT</span>
                                </div>
                                <div class="col-span-2 font-bold">
                                    1,500.00 USDT
                                </div>
                                <div class="col-span-2 text-white/70">
                                    7.25 CNY/USDT
                                </div>
                                <div class="col-span-1">
                                    <span class="status-badge bg-danger/20 text-danger">已取消</span>
                                </div>
                                <div class="col-span-1 text-right">
                                    <button class="text-primary hover:text-primary/80 text-sm">详情</button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="border-b border-white/10 hover:bg-white/5 transition-colors">
                            <div class="grid grid-cols-12 px-6 py-4">
                                <div class="col-span-2 text-sm">
                                    <div class="font-medium">#TRX-20230621-43210</div>
                                </div>
                                <div class="col-span-2 text-sm text-white/70">
                                    2023-06-21 08:27:59
                                </div>
                                <div class="col-span-2">
                                    <span class="px-3 py-1 rounded-full bg-primary/20 text-primary text-xs font-medium">出售USDT</span>
                                </div>
                                <div class="col-span-2 font-bold">
                                    800.00 USDT
                                </div>
                                <div class="col-span-2 text-white/70">
                                    7.31 CNY/USDT
                                </div>
                                <div class="col-span-1">
                                    <span class="status-badge bg-warning/20 text-warning">进行中</span>
                                </div>
                                <div class="col-span-1 text-right">
                                    <button class="text-primary hover:text-primary/80 text-sm">详情</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 移动端列表 -->
                    <div class="md:hidden">
                        <!-- 交易记录项 -->
                        <div class="p-4 border-b border-white/10">
                            <div class="flex justify-between items-start mb-3">
                                <div>
                                    <div class="font-medium">#TRX-20230625-12345</div>
                                    <div class="text-xs text-white/60">2023-06-25 14:30:22</div>
                                </div>
                                <span class="status-badge bg-success/20 text-success">已完成</span>
                            </div>
                            <div class="grid grid-cols-2 gap-3 mb-3">
                                <div class="bg-dark rounded-lg p-3">
                                    <div class="text-xs text-white/60 mb-1">类型</div>
                                    <div class="font-medium">出售USDT</div>
                                </div>
                                <div class="bg-dark rounded-lg p-3">
                                    <div class="text-xs text-white/60 mb-1">金额</div>
                                    <div class="font-medium">1,000.00 USDT</div>
                                </div>
                                <div class="bg-dark rounded-lg p-3">
                                    <div class="text-xs text-white/60 mb-1">价格</div>
                                    <div class="font-medium">7.32 CNY/USDT</div>
                                </div>
                            </div>
                            <button class="w-full py-2 bg-white/10 rounded-lg text-sm text-primary hover:bg-white/15 transition-colors">查看详情</button>
                        </div>
                        
                        <div class="p-4 border-b border-white/10">
                            <div class="flex justify-between items-start mb-3">
                                <div>
                                    <div class="font-medium">#TRX-20230624-67890</div>
                                    <div class="text-xs text-white/60">2023-06-24 09:15:47</div>
                                </div>
                                <span class="status-badge bg-success/20 text-success">已完成</span>
                            </div>
                            <div class="grid grid-cols-2 gap-3 mb-3">
                                <div class="bg-dark rounded-lg p-3">
                                    <div class="text-xs text-white/60 mb-1">类型</div>
                                    <div class="font-medium">购买USDT</div>
                                </div>
                                <div class="bg-dark rounded-lg p-3">
                                    <div class="text-xs text-white/60 mb-1">金额</div>
                                    <div class="font-medium">500.00 USDT</div>
                                </div>
                                <div class="bg-dark rounded-lg p-3">
                                    <div class="text-xs text-white/60 mb-1">价格</div>
                                    <div class="font-medium">7.30 CNY/USDT</div>
                                </div>
                            </div>
                            <button class="w-full py-2 bg-white/10 rounded-lg text-sm text-primary hover:bg-white/15 transition-colors">查看详情</button>
                        </div>
                        
                        <div class="p-4 border-b border-white/10">
                            <div class="flex justify-between items-start mb-3">
                                <div>
                                    <div class="font-medium">#TRX-20230623-54321</div>
                                    <div class="text-xs text-white/60">2023-06-23 16:42:11</div>
                                </div>
                                <span class="status-badge bg-warning/20 text-warning">进行中</span>
                            </div>
                            <div class="grid grid-cols-2 gap-3 mb-3">
                                <div class="bg-dark rounded-lg p-3">
                                    <div class="text-xs text-white/60 mb-1">类型</div>
                                    <div class="font-medium">出售USDT</div>
                                </div>
                                <div class="bg-dark rounded-lg p-3">
                                    <div class="text-xs text-white/60 mb-1">金额</div>
                                    <div class="font-medium">2,000.00 USDT</div>
                                </div>
                                <div class="bg-dark rounded-lg p-3">
                                    <div class="text-xs text-white/60 mb-1">价格</div>
                                    <div class="font-medium">7.28 CNY/USDT</div>
                                </div>
                            </div>
                            <button class="w-full py-2 bg-white/10 rounded-lg text-sm text-primary hover:bg-white/15 transition-colors">查看详情</button>
                        </div>
                    </div>
                    
                    <!-- 分页 -->
                    <div class="px-6 py-4 bg-dark-blue/50 border-t border-white/10 flex justify-between items-center">
                        <div class="text-sm text-white/60">
                            显示 1-5 条，共 24 条记录
                        </div>
                        <div class="flex space-x-1">
                            <button class="w-10 h-10 flex items-center justify-center rounded-lg border border-white/10 bg-dark text-white/60 hover:bg-white/10 transition-colors">
                                <i class="fa fa-angle-left"></i>
                            </button>
                            <button class="w-10 h-10 flex items-center justify-center rounded-lg bg-primary text-white">1</button>
                            <button class="w-10 h-10 flex items-center justify-center rounded-lg border border-white/10 bg-dark text-white/60 hover:bg-white/10 transition-colors">2</button>
                            <button class="w-10 h-10 flex items-center justify-center rounded-lg border border-white/10 bg-dark text-white/60 hover:bg-white/10 transition-colors">3</button>
                            <button class="w-10 h-10 flex items-center justify-center rounded-lg border border-white/10 bg-dark text-white/60 hover:bg-white/10 transition-colors">4</button>
                            <button class="w-10 h-10 flex items-center justify-center rounded-lg border border-white/10 bg-dark text-white/60 hover:bg-white/10 transition-colors">
                                <i class="fa fa-angle-right"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </main>

            <!-- 页脚 -->
            <footer class="bg-dark-blue border-t border-white/10">
                <div class="container mx-auto px-4 py-12">
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                        <div>
                            <div class="flex items-center space-x-2 mb-4">
                                <div class="w-10 h-10 rounded-lg bg-primary flex items-center justify-center">
                                    <i class="fa fa-exchange text-white text-xl"></i>
                                </div>
                                <h2 class="text-xl font-bold bg-gradient-to-r from-primary to-success bg-clip-text text-transparent">USDT<span class="text-sm font-normal ml-1">Market</span></h2>
                            </div>
                            <p class="text-white/60 mb-4">安全、便捷的USDT交易平台，支持多种本币出售，平台担保交易，保障资金安全</p>
                            <div class="flex space-x-4">
                                <a href="#" class="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center text-white hover:bg-primary transition-colors">
                                    <i class="fa fa-twitter"></i>
                                </a>
                                <a href="#" class="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center text-white hover:bg-primary transition-colors">
                                    <i class="fa fa-telegram"></i>
                                </a>
                                <a href="#" class="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center text-white hover:bg-primary transition-colors">
                                    <i class="fa fa-discord"></i>
                                </a>
                                <a href="#" class="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center text-white hover:bg-primary transition-colors">
                                    <i class="fa fa-github"></i>
                                </a>
                            </div>
                        </div>
                        
                        <div>
                            <h3 class="text-lg font-bold mb-4">出售服务</h3>
                            <ul class="space-y-2">
                                <li><a href="#" class="text-white/60 hover:text-primary transition-colors">USDT出售流程</a></li>
                                <li><a href="#" class="text-white/60 hover:text-primary transition-colors">设置出售价格</a></li>
                                <li><a href="#" class="text-white/60 hover:text-primary transition-colors">添加收款方式</a></li>
                                <li><a href="#" class="text-white/60 hover:text-primary transition-colors">认证卖家权益</a></li>
                                <li><a href="#" class="text-white/60 hover:text-primary transition-colors">提现到银行卡</a></li>
                            </ul>
                        </div>
                        
                        <div>
                            <h3 class="text-lg font-bold mb-4">资源中心</h3>
                            <ul class="space-y-2">
                                <li><a href="#" class="text-white/60 hover:text-primary transition-colors">新手教程</a></li>
                                <li><a href="#" class="text-white/60 hover:text-primary transition-colors">安全指南</a></li>
                                <li><a href="#" class="text-white/60 hover:text-primary transition-colors">常见问题</a></li>
                                <li><a href="#" class="text-white/60 hover:text-primary transition-colors">交易规则</a></li>
                                <li><a href="#" class="text-white/60 hover:text-primary transition-colors">联系客服</a></li>
                            </ul>
                        </div>
                        
                        <div>
                            <h3 class="text-lg font-bold mb-4">法律合规</h3>
                            <ul class="space-y-2">
                                <li><a href="#" class="text-white/60 hover:text-primary transition-colors">隐私政策</a></li>
                                <li><a href="#" class="text-white/60 hover:text-primary transition-colors">服务条款</a></li>
                                <li><a href="#" class="text-white/60 hover:text-primary transition-colors">风险提示</a></li>
                                <li><a href="#" class="text-white/60 hover:text-primary transition-colors">合规声明</a></li>
                                <li><a href="#" class="text-white/60 hover:text-primary transition-colors">知识产权</a></li>
                            </ul>
                        </div>
                    </div>
                    
                    <div class="h-px bg-white/10 my-8"></div>
                    
                    <div class="flex flex-col md:flex-row justify-between items-center">
                        <p class="text-white/60 text-sm mb-4 md:mb-0">© 2023 USDTMarket. 保留所有权利。平台不参与任何资金交易，仅提供信息匹配服务。</p>
                        <div class="flex space-x-6">
                            <a href="#" class="text-white/60 hover:text-primary transition-colors text-sm">隐私政策</a>
                            <a href="#" class="text-white/60 hover:text-primary transition-colors text-sm">服务条款</a>
                            <a href="#" class="text-white/60 hover:text-primary transition-colors text-sm">风险提示</a>
                        </div>
                    </div>
                </div>
            </footer>

            <!-- JavaScript -->
            <script>
                // 导航栏滚动效果
                const navbar = document.getElementById('navbar');
                window.addEventListener('scroll', () => {
                    if (window.scrollY > 10) {
                        navbar.classList.add('bg-dark-blue/90');
                        navbar.classList.add('shadow-lg');
                    } else {
                        navbar.classList.remove('bg-dark-blue/90');
                        navbar.classList.remove('shadow-lg');
                    }
                });
                
                // 交易筛选和搜索功能
                const searchInput = document.querySelector('input[placeholder="搜索交易ID、买家/卖家信息..."]');
                const filterButton = document.querySelector('button:has(.fa-filter)');
                const resetButton = document.querySelector('button:has(.fa-refresh)');
                
                filterButton.addEventListener('click', () => {
                    alert('筛选功能已应用');
                });
                
                resetButton.addEventListener('click', () => {
                    document.querySelectorAll('select').forEach(select => {
                        select.selectedIndex = 0;
                    });
                    searchInput.value = '';
                });
                
                // 分页功能
                const paginationButtons = document.querySelectorAll('.flex.space-x-1 button');
                paginationButtons.forEach(button => {
                    button.addEventListener('click', () => {
                        if (!button.classList.contains('bg-primary')) {
                            paginationButtons.forEach(btn => {
                                btn.classList.remove('bg-primary', 'text-white');
                                btn.classList.add('border', 'border-white/10', 'bg-dark', 'text-white/60');
                            });
                            button.classList.add('bg-primary', 'text-white');
                            button.classList.remove('border', 'border-white/10', 'bg-dark', 'text-white/60');
                            alert(`已切换到第 ${button.textContent} 页`);
                        }
                    });
                });
            </script>
        </body>
        </html>
    